var numberColumns;
var numberRow;

function ImagesIndex() {
	var images = [];

	function getImage(i) {
		return images[i];
	}

	function insertImage(image) {
		var jsImg = new Image();
		jsImg.src = image.img_src;
		images.push(jsImg);
	}

	function imagesLength() {
		return images.length;
	}

	return {
		length : imagesLength,
		insert : insertImage,
		get : getImage,
	}
}

var imagesIndex = new ImagesIndex();

function createImageTable() {

	if(document.getElementById("calendarLeftArrow")) {
		removeObject("calendarLeftArrow");
		removeObject("calendarRightArrow");
	}
	
	var imageCounterId = 0;
	numberColumns = Math.floor(document.body.clientWidth * 0.8 / 210);
	numberRow = images.length / numberColumns;
	var tableString = "<table id='thumbImageTable'>";

	for(var row = 0; row < numberRow; row++) {
		tableString += "<tr id='column" + row + "'>";
		for(var col = 0; col < numberColumns; col++) {
			if(col + row * numberColumns < images.length){
			imagesIndex.insert(images[col + row * numberColumns]);
			tableString += "<td align='center' id='cellImage" + (col + row * numberColumns) + "'><img class='thumbImg' src='" + images[col + row * numberColumns].img_src + "' id=image" + (col + row * numberColumns) + "></td>";
		}}
		tableString += "</tr>";
	}
	tableString += "</table>";

	document.getElementById("g_container").innerHTML = tableString;

	setHandler();
}

function setHandler() {
	for(var i = 0; i < images.length; i++) {
		document.getElementById("image" + i).onclick = function(num) {
			return function() {
				arrows = true;
				insertImage(imagesIndex.get(num), num);
			};
		}(i);
	}
}